import React, { useContext, useRef } from 'react';
import type { FC } from 'react';
// @ts-ignore
import { useAliveController } from 'react-activation';
import TabView from './TabView';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { Space } from 'antd';
import { RouteContext } from '@ant-design/pro-layout';
import '../index.less';

const TabViews: FC = () => {
  const { getCachingNodes } = useAliveController();
  const cachingNodes = getCachingNodes();
  const routeContext = useContext(RouteContext);
  const scrollContainer = useRef<HTMLDivElement>();

  return (
    <div className="tabview-container">
      <div className="tabview-bar" ref={scrollContainer}>
        {cachingNodes.map((node, idx) => (
          <TabView key={idx} node={node} />
        ))}
        <Space className="tabview-more">
          <LeftOutlined className="more-icon"
            onClick={() =>
              (scrollContainer.current.scrollLeft = scrollContainer.current.scrollLeft - 100)
            }
          />
          <RightOutlined className="more-icon"
            onClick={() =>
              (scrollContainer.current.scrollLeft = scrollContainer.current.scrollLeft + 100)
            }
          />
        </Space>
      </div>
    </div>
  );
};

export default TabViews;
